<script setup lang="ts">
import type { Resource } from '#/api/resource-center/types';

import { computed } from 'vue';

import { IconifyIcon } from '@vben/icons';

import { ResourceType, SystemStatus } from '#/api/resource-center/types';

// Props
interface Props {
  resource: Resource;
}

const props = defineProps<Props>();

// 计算属性
const resourceTypes = computed(() => [
  { value: ResourceType.DIGITAL, label: '数字资源' },
  { value: ResourceType.HUMAN, label: '人力资源' },
  { value: ResourceType.PHYSICAL, label: '物理资源' },
  { value: ResourceType.SERVICE, label: '服务资源' },
  { value: ResourceType.VIRTUAL, label: '虚拟资源' },
  { value: ResourceType.CAPABILITY, label: '能力资源' },
]);

const systemStatuses = computed(() => [
  { value: SystemStatus.DRAFT, label: '草稿', color: 'default' },
  { value: SystemStatus.PUBLISHED, label: '已发布', color: 'blue' },
  { value: SystemStatus.ACTIVE, label: '运行中', color: 'green' },
  { value: SystemStatus.INACTIVE, label: '已下线', color: 'orange' },
  { value: SystemStatus.DEPRECATED, label: '已废弃', color: 'red' },
  { value: SystemStatus.RETIRED, label: '已退役', color: 'gray' },
]);

// 方法
const getResourceTypeColor = (type: ResourceType) => {
  const typeMap: Record<ResourceType, string> = {
    [ResourceType.DIGITAL]: 'cyan',
    [ResourceType.HUMAN]: 'blue',
    [ResourceType.PHYSICAL]: 'orange',
    [ResourceType.SERVICE]: 'purple',
    [ResourceType.VIRTUAL]: 'geekblue',
    [ResourceType.CAPABILITY]: 'green',
  };
  return typeMap[type] || 'default';
};

const getResourceTypeLabel = (type: ResourceType) => {
  const typeOption = resourceTypes.value.find((t) => t.value === type);
  return typeOption?.label || type;
};

const getStatusColor = (status: SystemStatus) => {
  const statusOption = systemStatuses.value.find((s) => s.value === status);
  return statusOption?.color || 'default';
};

const getStatusLabel = (status: SystemStatus) => {
  const statusOption = systemStatuses.value.find((s) => s.value === status);
  return statusOption?.label || status;
};

const getVisibilityColor = (visibility: string) => {
  const colorMap: Record<string, string> = {
    PRIVATE: 'red',
    TENANT: 'orange',
    PUBLIC: 'green',
  };
  return colorMap[visibility] || 'default';
};

const getVisibilityLabel = (visibility: string) => {
  const labelMap: Record<string, string> = {
    PRIVATE: '私有',
    TENANT: '租户内',
    PUBLIC: '公开',
  };
  return labelMap[visibility] || visibility;
};

const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleString('zh-CN');
};

// 统计方法
const getAttributesCount = () => {
  return props.resource.facets.attributes?.bags?.length || 0;
};

const getBehaviorsCount = () => {
  return props.resource.facets.behaviors?.definitions?.length || 0;
};

const getRelationsCount = () => {
  return props.resource.facets.relations?.edges?.length || 0;
};

const getEventsCount = () => {
  const publishCount = props.resource.facets.events?.publish?.length || 0;
  const subscribeCount = props.resource.facets.events?.subscribe?.length || 0;
  return publishCount + subscribeCount;
};
</script>

<template>
  <div class="resource-overview">
    <!-- 基本信息卡片 -->
    <a-card title="基本信息" class="overview-card">
      <a-descriptions :column="2">
        <a-descriptions-item label="资源名称">
          {{ resource.name }}
        </a-descriptions-item>
        <a-descriptions-item label="资源代码">
          {{ resource.code }}
        </a-descriptions-item>
        <a-descriptions-item label="资源类型">
          <a-tag :color="getResourceTypeColor(resource.type)">
            {{ getResourceTypeLabel(resource.type) }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="系统状态">
          <a-tag :color="getStatusColor(resource.systemStatus)">
            {{ getStatusLabel(resource.systemStatus) }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="当前版本">
          {{ resource.version }}
        </a-descriptions-item>
        <a-descriptions-item label="租户ID">
          {{ resource.tenantId }}
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          {{ formatDate(resource.createdAt) }}
        </a-descriptions-item>
        <a-descriptions-item label="更新时间">
          {{ formatDate(resource.updatedAt) }}
        </a-descriptions-item>
      </a-descriptions>

      <!-- 标签 -->
      <div
        v-if="resource.labels && Object.keys(resource.labels).length > 0"
        class="labels-section"
      >
        <h4>标签</h4>
        <div class="labels-container">
          <a-tag
            v-for="(value, key) in resource.labels"
            :key="key"
            color="blue"
          >
            {{ key }}: {{ value }}
          </a-tag>
        </div>
      </div>

      <!-- 注解 -->
      <div
        v-if="
          resource.annotations && Object.keys(resource.annotations).length > 0
        "
        class="annotations-section"
      >
        <h4>注解</h4>
        <pre class="annotations-content">{{
          JSON.stringify(resource.annotations, null, 2)
        }}</pre>
      </div>
    </a-card>

    <!-- 统计信息卡片 -->
    <a-card title="统计信息" class="overview-card">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-statistic
            title="属性包数量"
            :value="getAttributesCount()"
            :value-style="{ color: '#3f8600' }"
          >
            <template #prefix>
              <IconifyIcon icon="ant-design:database-outlined" />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="6">
          <a-statistic
            title="行为定义"
            :value="getBehaviorsCount()"
            :value-style="{ color: '#1890ff' }"
          >
            <template #prefix>
              <IconifyIcon icon="ant-design:thunderbolt-outlined" />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="6">
          <a-statistic
            title="关系数量"
            :value="getRelationsCount()"
            :value-style="{ color: '#722ed1' }"
          >
            <template #prefix>
              <IconifyIcon icon="ant-design:share-alt-outlined" />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="6">
          <a-statistic
            title="事件绑定"
            :value="getEventsCount()"
            :value-style="{ color: '#fa8c16' }"
          >
            <template #prefix>
              <IconifyIcon icon="ant-design:bell-outlined" />
            </template>
          </a-statistic>
        </a-col>
      </a-row>
    </a-card>

    <!-- 治理信息卡片 -->
    <a-card title="治理信息" class="overview-card">
      <a-descriptions :column="2">
        <a-descriptions-item label="可见性">
          <a-tag :color="getVisibilityColor(resource.governance.visibility)">
            {{ getVisibilityLabel(resource.governance.visibility) }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="责任人">
          {{ resource.governance.owners.join(', ') || '未设置' }}
        </a-descriptions-item>
        <a-descriptions-item label="RBAC规则">
          {{ resource.governance.rbac?.length || 0 }} 条
        </a-descriptions-item>
        <a-descriptions-item label="审批流程">
          {{ resource.governance.approvals?.length || 0 }} 步
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
</template>

<style lang="less" scoped>
.resource-overview {
  .overview-card {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .labels-section,
  .annotations-section {
    margin-top: 16px;

    h4 {
      margin: 0 0 8px 0;
      font-size: 14px;
      font-weight: 600;
      color: #333;
    }
  }

  .labels-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .annotations-content {
    background: #f5f5f5;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow: auto;
  }
}
</style>
